<script setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessageBox  } from 'element-plus';
  import useUserInfoStore from '@/stores/userinfo'
  import useAppStatusStore from '@/stores/appStatus'
  import netSetting from '@/configs/netSetting'
  const { baseURL } = netSetting
  const kfImg = baseURL + '/appFiles/image/qrcode/kfqrcode.jpg?_ts=' + new Date().getTime()

  const userInfoStore = useUserInfoStore()  // 用户信息store
  const appStatusStore = useAppStatusStore()
  const appRouter = useRouter() // 路由

  let navMenus = ref([])  // 顶部菜单栏
  const domainTips = '本网站数据仅作为参考,据本站投资,责任需自担.'

  const authDig = reactive({
    isShow: false,
    menuName: '',
  })
  
  // 鼠标进入菜单
  const mouseEnterMenu = (mid) => {
    navMenus.value.forEach((m) => {
      m.subShow = m.code === mid ? true : false
    })
  }
  // 鼠标离开主菜单
  const mouseLeaveMenu = (event) => {
    if (event.pageY < 1) {
      mouseEnterMenu('0') // 鼠标向上离开菜单，隐藏子菜单
    }
  } 
  // 鼠标离开子菜单
  const mouseLeaveSubMenu = () => {
    navMenus.value.forEach((m) => {
      m.subShow =  false
    })
  }

  const isRouterGuardPass = (menuItem) => {
    if (userInfoStore.accessAll) {
      return true
    }
    if (!menuItem.access) {
      authDig.menuName = menuItem.name
      authDig.isShow = true
      // ElMessageBox.alert(
      //   `对不起，您还没有访问【${menuItem.name}】内容的权限，如需开通，请联系客服：0595-36208232`,
      //   '提示',
      //   {
      //     confirmButtonText: '确定'
      //   }
      // )
      return false
    } else {
      return true
    }
  }

  // 进入菜单页面
  const toEnterPage = (menu) => {
    if (menu.hasChildren) return
    // console.log(menu)
    if (menu.path === '/'){
      toHomePage()
      return
    }
    if (!isRouterGuardPass(menu)) return
    if (userInfoStore.hasLogin) {
      appRouter.push(menu.path)
    } else {
      toHomePage()
      appStatusStore.showLogin = true
    }
  }
  const toHomePage = () => {
    appRouter.replace({ path: '/', name: 'home' })
  }
  // const toPersonalCenter = () => {
  //   appRouter.push({ path: '/mycenter', name: 'mycenter' })
  // }
  const toHelpPage = () => {
    appRouter.push({ path: '/help', name: 'help' })
  }

  // 准备决策粒签到弹窗
  const alertActivationExplain = () => {
    if (userInfoStore.activation === '未登录') {
      userInfoStore.appUserLogout()  // 退出，避免隐式(不弹窗)登录
      userInfoStore.getAppUserInfo()
    } else {
      appStatusStore.showSignin = true // 全局弹窗，使用全局状态控制
    }
    
  }

  // 点击用户的下拉菜单
  const triggerUserMenuCommand = (action) => {
    switch (action) {
      case 'exit': 
        ElMessageBox.confirm(
          '确认退出系统吗?',
          '退出确认',
          {
            confirmButtonText: '确定退出',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          // 用户退出
          userInfoStore.appUserLogout()
          appRouter.push({ path: '/', name: 'home' })
        })
        .catch(() => {})
          break;
      case 'personalCenter':
        appRouter.push({ path: '/mycenter', name: 'mycenter' })
        break;
      default:
        break;
    }
  }

  // 刷新权限
  const toRefushAuthentication = () => {
    userInfoStore.getAppUserInfo()
      .then(() => {
        ElMessageBox({
          title: '成功',
          message: '权限刷新成功！',
          type: 'success'
        })
      })
      .catch(() => {
        ElMessageBox({
          title: '失败',
          message: '刷新权限失败了！',
          type: 'error'
        })
      })
  }
  
  // onMounted声明钩子
</script>
<template>
  <div class="nav-bar">
    <!-- 系统名称与logo -->
    <span class="nav-name" @click="toHomePage">RuizhiSystem</span>
    <!-- 分割线 -->
    <el-divider direction="vertical"></el-divider>
    <!-- 菜单 -->
    <span class="menu-box">
      <div class="menu-item" @click="toEnterPage({hasChildren: false, path: '/'})">
        <span>首页</span>
      </div>
      <div v-for="menu in userInfoStore.navigationMenus"
        :key="menu.code"
        class="menu-item"
        @mouseenter="mouseEnterMenu(menu.code)"
        @mouseleave="mouseLeaveMenu($event)"
        @click="toEnterPage(menu)"
      >
        <span>{{ menu.name }}</span>
        <span v-if="menu.hasChildren" class="menu-arrow-down">
          <el-icon size="11"><ArrowDown /></el-icon>
        </span>
        <div
          v-if="menu.hasChildren" :class="menu.subShow ? 'sub-menu sub-show':'sub-menu'"
          @mouseleave="mouseLeaveSubMenu"
        >
          <div 
            v-for="subMenu in menu.children"
            :key="subMenu.code" 
            class="sub-menu-item"
            @click.stop="toEnterPage(subMenu)"
          >
            <span>{{ subMenu.name }}</span>
          </div>
        </div>
      </div>
    </span>
    <!-- 右侧内容 -->
    <div class="right-pane">
      <div class="shield-flush" @click="toRefushAuthentication">
        <el-icon :size="15"><svg-icon name="shield"></svg-icon></el-icon>
        <div class="shield-text">刷新权限</div>
      </div>
      <div class="help-box" @click="toHelpPage">
        <el-icon :size="13"><QuestionFilled /></el-icon>
        <div class="help-text">帮助</div>
      </div>
      <!-- 风险提示 -->
      <div class="tip-box">
        <div class="animate">
          <span>{{ domainTips }}</span>
        </div>
      </div>
      <!-- 决策粒 -->
      <div class="activation-box" @click="alertActivationExplain">
        <el-icon><Sunny /></el-icon>
        <div class="value">{{ userInfoStore.activation }}</div>
      </div>
      <!-- 用户信息 -->
      <div class="user-box" v-if="userInfoStore.hasLogin">
        <el-dropdown trigger="hover" @command="triggerUserMenuCommand">
          <div class="avatar-name">
            <el-avatar
              :class="userInfoStore.isVip ? 'vip-avatar':''"
              :src="userInfoStore.avatarUrl"
              :size="30"
            />
            <div :class="userInfoStore.isVip ? 'vip-nickname':'nickname'">
              {{ userInfoStore.nickname }}
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-item icon="User" command="personalCenter">
              <span>个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item icon="SwitchButton" command="exit">
              <span>安全退出</span>
            </el-dropdown-item>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-dialog
      v-model="authDig.isShow"
      title="提示"
      width="500"
    >
      <div class="auth-box">
        <div class="plain-text">
          对不起，您暂时还没有开通访问
          <div class="m-name">【{{ authDig.menuName }}】</div>
          内容的权限，可联系客服开通：
          <div>
            0595-36208232
          </div>
        </div>
        <div class="link-img">
          <el-image class="qrcode-image" :src="kfImg" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  @keyframes contentLoop {
    0% {
      transform: translateX(30px);
      -webkit-transform: translateX(30px);
    }
    100% {
      transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
    }
  }
  .nav-bar {
    // width: 100%;
    // -32px padding影响了
    min-width: calc(#{$content-width} - 32px);
    height: $navbar-height;
    line-height: $navbar-line-height;
    background-color: $navbar-background-color;
    padding: 0 16px;
    .nav-name {
      color: #987ace;
      cursor: pointer;
    }
    .menu-box {
      position: relative;
      display: inline-block;
      .menu-item {
        position: relative;
        display: inline-block;
        color: #fefefe;
        cursor: pointer;
        padding: 0 10px;
        height: calc(#{$navbar-height} - 2px);
        font-size: 15px;
        &:hover {
          color: aqua;
          background-color: #4f4f4f;
        }
        .menu-arrow-down{
          margin-left: 6px;
        }
      }
      .sub-menu {
        display: none;
        position: absolute;
        left: 0;
        background-color: #fefefe;
        border: 1px solid #b3d0e4;
        border-top: 0;
        min-width: 130px;
        pointer-events: all;
        z-index: 99;
        .sub-menu-item {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #000;
          border-bottom: 1px solid #b3d0e4;
          &:hover {
            color: #ff4901;
          }
          &:last-child{
            border-bottom: none;
          }
        }
      }
      .sub-show {
        display: block;
      }
    }
    
    .right-pane {
      float: right;
      display: flex;
      height: $navbar-height;
      .shield-flush {
        display: flex;
        align-items: center;
        font-size: 13px;
        margin-right: 10px;
        cursor: pointer;
        .shield-text {
          color: #cc9f58;
        }
      }
      .help-box {
        display: flex;
        align-items: center;
        margin-right: 20px;
        cursor: pointer;
        .el-icon {
          color: #e6e6e6;
          margin-right: 2px;
        }
        .help-text {
          font-size: 13px;
          color: #efefef;
        }
      }
      .tip-box {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        color: #efefef;
        font-size: 12px;
        margin-right: 16px;
        .animate{
          animation: 15s contentLoop linear infinite normal;
          &:hover{
            animation-play-state: paused;
          }
        }
      }
      .activation-box{
        display: flex;
        align-items: center;
        margin-right: 16px;
        font-size: 16px;
        cursor: pointer;
        
        .el-icon {
          color: #ff4901;
          padding: 2px 6px;
          padding-right: 0;
          background-color: #636161;
          border-radius: 4px 0 0 4px;
        }
        .value{
          color: #ff4901;
          height: 16px;
          line-height: 16px;
          padding: 2px 6px;
          padding-left: 3px;
          font-size: 12px;
          background-color:#636161;
          border-radius: 0 4px 4px 0;
        }
      }
      .user-box {
        display: flex;
        align-items: center;
        position: relative;
        .vip-avatar {
          border: 2px solid #ffa500;
        }
        .avatar-name {
          
          cursor: pointer;
          user-select: none;
          display: flex;
          align-items: center;
          &:focus {
            outline: none;
          }
          .nickname {
            margin-left: 3px;
            color: #c0c4cc;
          }
          .vip-nickname {
            margin-left: 3px;
            color: #e79326;
          }
        }
      }
    }
    
  }
  .activation-tip {
    font-size: 12px;
    color: #777;
    line-height: 18px;
    margin-left: 2px;
  }
  .sign-box {
    .sign-items{
      display: flex;
      justify-content: space-between;
      text-align: center;
      margin: -20px 0 0 0;
      padding: 0 40px;
      .sign-item {
        width: 70px;
        .day-siged {
          background-color: #dd8144 !important;
        }
        .day-icon {
          line-height: 22px;
          font-size: 40px;
          color: #fff;
          padding-top: 10px;
          background-color: #999;
          border-radius: 10px 10px 0 0;
        }
        .day-value {
          color: #fff;
          font-size: 20px;
          background-color: #999;
          border-radius: 0 0 10px 10px;
        }
        
        .day-name {
          font-size: 15px;
          color: #636161;
        }
      }
      }
      .actions {
        text-align: center;
        margin-top: 16px;
        .signup {
          height: 40px;
          width: 200px;
          font-size: 17px;
        }
      }
  }
  .auth-box {
    display: flex;
    margin-top: -30px;
    margin-bottom: -20px;
    .plain-text {
      font-size: 17px;
      .m-name {
        color: $goldenColor;
      }
    }
    .link-img {
      text-align: left;
      .qrcode-image {
        width: 200px;
        height: 200px;
      }
    }

  }
</style>